<template>
	<view class="searchWrap">
		<uni-search-bar @confirm="search" v-model="searchValue" @input="searchInput" placeholder="搜索关键词" />
	</view>
	<view class="content">
		<view class="sideBar">
			<side-bar :active="current">
				<side-bar-item v-for="(item,index) in classList" :key="item.cate_id"
					@click.native="onSlideItemClick(index)">
					<view class="sideBarItem" :class="{active:current===index}">
						<text class="text">{{item.cate_name}}</text>
					</view>
				</side-bar-item>
			</side-bar>
		</view>
		<view class="goodsWrap">
			<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="onScrolltolower">
				<list reqUrl="/api/goodslist" :reqData="reqData" formatData :handleFormat="handleFormat"
					:immediatecheck="false" ref="listInstance">
					<template v-slot="{ list }">
						<view class="goods" v-for="item in list" :key="item.goods_id"
							@click="goProductDetail(item.goods_id)">
							<goods image_width="92px" image_height="92px" :name="item.goods_title"
								:sub_name="item.goods_sub_title" :image="imgHost + item.pic">
								<view class="saled">已售{{ item.sales }}+</view>
								<template #bottom>
									<view class="bottom_bar">
										<view class="price">
											<view class="now_price">
												<text>￥</text>
												<text class="num">{{ item._integer }}</text>
												<text v-if="item._decimal!=='00'">.{{ item._decimal }}</text>
											</view>
											<text class="origin_price">￥{{ item.original_price }}</text>
										</view>
										<view class="button center" hover-class="tapstate">立抢</view>
									</view>
								</template>
							</goods>
						</view>
					</template>
				</list>
			</scroll-view>
		</view>
	</view>
	<tabbar :active="1"></tabbar>
</template>

<script setup>
	import { ref } from 'vue';
	import request from '@/utils/common/request/index';
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	import tabbar from '@/components/tabbar/tabBar.vue';
	import { useGetThemColor } from '@/hooks/useGetThemColor';

	const { primaryColor, primaryColor__light7, secondaryColor } = useGetThemColor();
	const { imgHost } = getApp().globalData;

	// * 搜索
	let searchValue = ref('');
	const search = ({ value }) => {
		reqData.goods_title = value;
		listInstance.value.resetRequest();
	};
	const searchInput = (value) => {
		if (value === '') {
			reqData.goods_title = '';
			listInstance.value.resetRequest();
		}
	}

	let current = ref(0);
	let classList = ref([]);
	const getClassList = (isReqList = true) => {
		return request({
			url: '/api/goodscate'
		}).then(data => {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
			data.unshift({
				cate_id: '',
				cate_name: '全部'
			});
			classList.value = data;
			isReqList && listInstance.value.resetRequest();
		});
	}
	getClassList();
	const onSlideItemClick = index => {
		if (current.value === index) return;
		current.value = index;
		reqData.cate_id = classList.value[index].cate_id;
		listInstance.value.resetRequest();
	}


	/**产品列表 */
	const listInstance = ref();
	let reqData = {
		cate_id: '',
	};

	/**产品数据格式化函数 */
	const handleFormat = (res) => {
		let data = res.data;
		data.forEach((item) => {
			[item._integer, item._decimal] = item.present_price.toString().split('.');
			item.original_price = Number(item.original_price);
		});
		return data;
	};

	const goProductDetail = (id) => {
		uni.navigateTo({
			url: `/pages/productDetail/productDetail?id=${id}`,
		});
	}

	const onScrolltolower = () => {
		listInstance.value.loadMore();
	}
	const onRefresherrefresh = () => {
		listInstance.value.resetRequest();
	}

	/**下拉刷新事件 */
	onPullDownRefresh(() => {
		getClassList(false).then(() => {
			return listInstance.value.resetRequest();
		}).finally(() => {
			uni.stopPullDownRefresh();
		})
	});
</script>

<style lang="scss" scoped>
	page {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.searchWrap {
		background-color: #fff;

		::v-deep .uni-searchbar {
			padding: 10px 10px;
		}
	}

	.content {
		flex: 1;
		overflow: hidden;
		display: flex;
	}


	.sideBar {
		flex-shrink: 0;
		width: 90px;

		.sideBarItem {
			position: relative;
			text-align: center;
			padding: 14px 0;

			&.active {
				background-color: #fff;

				&::before {
					content: '';
					position: absolute;
					right: 0;
					top: -20rpx;
					width: 20rpx;
					height: 20rpx;
					background: radial-gradient(circle at 0 0, transparent, transparent 20rpx, #fff 20rpx);
				}

				&::after {
					content: '';
					position: absolute;
					right: 0;
					bottom: -20rpx;
					width: 20rpx;
					height: 20rpx;
					background: radial-gradient(circle at 0 20rpx, transparent, transparent 20rpx, #fff 20rpx);
				}

				.text {
					color: v-bind(primaryColor);

					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 10rpx;
						height: 40rpx;
						background: v-bind(primaryColor);
						border-radius: 0 8rpx 8rpx 0;
					}
				}
			}
		}
	}

	.goodsWrap {
		flex: 1;
		background-color: #fff;
	}

	.goods {
		padding: 10px;

		&+.goods {
			margin-top: 10px;
		}

		.saled {
			font-size: 12px;
			color: #999;
		}

		.bottom_bar {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			height: 100%;

			.price {
				flex: 1;
				display: flex;
				align-items: center;
			}

			.now_price {
				font-size: 12px;
				font-weight: bold;
				color: v-bind(secondaryColor);

				.num {
					font-size: 16px;
				}
			}

			.origin_price {
				margin-left: 8px;
				font-size: 12px;
				color: #999;
				text-decoration: line-through;
			}

			.button {
				width: 50px;
				height: 28px;
				background: linear-gradient(180deg, v-bind(primaryColor__light7) 0%, v-bind(primaryColor) 100%);
				box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.18);
				border-radius: 14px;
				font-size: 12px;
				color: #fff;
			}
		}
	}
</style>

<style>
	/*只能在这里设置*/
	page {
		background-color: #f5f5f5;
	}
</style>